<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <link th:href="@{/css/index.css}" rel="stylesheet"/>
    <link th:href="@{/css/dp.css}" rel="stylesheet"/>
    <title>演唱会列表</title>
</head>
<body class="text-center">
<th:block th:insert="~{header :: head}"/>
<div class="container">
    <!-- Header Section -->
    <h1 th:text="${concert.concertname}"></h1>
    <!-- Concert Info Section -->
    <div class="concert-info">
        <div class="details">
            <p><strong>时间：</strong>
                <span th:text="${#dates.format(concert.concertdate, 'yyyy-MM-dd')}"></span>
                <span th:text="${#dates.format(concert.concerttime, 'HH:mm')}"></span>
            </p>
            <p><strong>地址：</strong><span th:text="${concert.venue}"></span></p>

            <!-- Ticket Order Form -->
            <form th:action="@{/order}" method="post">
                <input type="hidden" name="concertid" th:value="${concert.concertid}">

                <!-- Ticket Type Selection -->
                <p><strong>票档：</strong></p>
                <div th:each="ticket : ${tickets}">
                    <label>
                        <input type="radio" name="ticketid" onclick="calculateTotalPrice()"
                               th:disabled="${ticket.getRemainingtickets() == 0}"
                               th:value="${ticket.ticketid}"
                               th:data-price="${ticket.getPrice()}"
                               th:text="${ticket.getTickettype()} +
                               ' (' + ${ticket.getSeatarea()} + ') 剩余' +
                                ${ticket.getRemainingtickets()} + '张票'" required>
                    </label>
                </div>

                <!-- Total Price Display -->
                <p><strong>合计：</strong>￥<span id="total-price">0</span></p>

                <!-- Submit Button -->
                <button type="submit" class="buy-button">立即购票</button>
            </form>
        </div>
        <div>
            <div class="concert-image">
                <img th:src="${concert.concertImg}" alt="Concert Poster">
            </div>
        </div>
    </div>
    <div class="tabs">
        <!-- Tab Buttons -->
        <button class="tab active" onclick="showTab()">项目介绍</button>
        <button class="tab" onclick="showTab('discussion')">用户讨论</button>
    </div>

    <!-- Description Section -->
    <div class="content-section" id="introduction">
        <h3>项目介绍</h3>
        <p th:text="${concert.introduction}">这里是演唱会的介绍内容。</p>
    </div>

    <div class="content-section" id="discussion" style="display: none;">
        <h3>用户讨论</h3>

        <!-- 检查是否有评论 -->
        <div th:if="${#lists.isEmpty(comments)}">
            <p>暂时没有评论，快来留下你的看法吧！</p>
        </div>

        <!-- 评论列表 -->
        <ul th:if="${!#lists.isEmpty(comments)}" class="comment-list">
            <li th:each="comment : ${comments}" class="comment-item">
                <div class="comment-header">
                    <strong>用户：</strong><span th:text="${comment.getUsername()}+'      '"></span>
                    <span class="comment-time" th:text="${#dates.format(comment.commenttime, 'yyyy-MM-dd HH:mm:ss')}"></span>
                </div>
                <div class="comment-content">
                    <p th:text="${comment.commentcontent}"></p>
                </div>
            </li>
        </ul>
    </div>

</div>
<th:block th:insert="~{footer :: foot}"/>

<script>
        // 动态计算总价
    const ticketRadios = document.querySelectorAll('input[name="ticketid"]');
    const totalPriceElement = document.getElementById('total-price');

    function calculateTotalPrice() {
        const selectedTicket = document.querySelector('input[name="ticketid"]:checked');
        if (selectedTicket) {
            const price = parseInt(selectedTicket.getAttribute('data-price'), 10);
            totalPriceElement.textContent = price;
        } else {
            totalPriceElement.textContent = '0';
        }
    }
    ticketRadios.forEach(radio => radio.addEventListener('change', calculateTotalPrice));

        function showTab(tabId) {
            // 隐藏所有内容部分
            document.querySelectorAll('.content-section').forEach(section => {
                section.style.display = 'none';
            });
            // 移除所有按钮的 active 类
            document.querySelectorAll('.tab').forEach(tab => {
                tab.classList.remove('active');
            });
            // 显示当前选中的内容部分
            document.getElementById(tabId).style.display = 'block';
            // 为当前点击的按钮添加 active 类
            event.target.classList.add('active');
        }

        // 默认显示第一个选项卡
        document.getElementById('introduction').style.display = 'block';
</script>
</body>
</html>
